<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/project_closing.css">
</head>

<body>
    <footer class="ui-footer ui-footer-stable ui-border-t">
        <div class="ui-footer-btns">
            <button type="button" class="btn-submit-all btn-footer btn-red">提交审核</button>
        </div>
    </footer>

    <section class="ui-container">
        <form action="">
            <div class="u-module ui-border-tb">
                <div class="ui-form form-common2 form-show">
                    <div class="ui-form-item">
                        <label for="#">项目名称</label>
                        <p class="txt">冠军为爱而来筹建梦想中心</p>
                    </div>
                    <div class="ui-form-item">
                        <label for="#">已筹总额</label>
                        <p class="txt"><em>2000</em> 元</p>
                    </div>
                    <div class="ui-form-item">
                        <label for="#">接受总额</label>
                        <p class="txt"><em>1000</em> 元</p>
                    </div>
                </div>
            </div>

            <div class="u-module-title">善款使用</div>
            <div class="u-module">
                <div class="ui-form form-common2">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">实际花费</label>
                        <input type="text" placeholder="请输入项目实际花费金额">
                        <div class="form-unit">元</div>
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label for="#">发票总额</label>
                        <input type="text" placeholder="请输入提供的发票总额">
                        <div class="form-unit">元</div>
                    </div>
                    <div class="ui-form-item ui-form-item-textarea">
                        <label for="#">善款明细</label>
                        <textarea class="count-num" placeholder="更具反馈票简述善款使用明细，包括购买了那几种物资，如何安排发放等，以及尾款或剩余款项的处理。" data-length="500"></textarea>
                        <div class="form-unit count">500</div>
                    </div>

                    <div class="form-imgs" data-index="1" data-max-length="4">
                        <div class="img-box">
                            <b class="close"><img src="../images/icon-fork-white.png" alt=""></b>
                            <input type="file" id="img1">
                            <input type="hidden">
                        </div>
                    </div>
                    <div class="form-imgs-hint ui-border-b">
                        上传发票照片（1-4张）
                    </div>
                </div>
            </div>

            <div class="u-module-title">项目执行</div>
            <div class="u-module">
                <div class="ui-form form-common2">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">受益人群</label>
                        <input class="count-num" type="text" placeholder="例如：江西遂川希望小学" data-length="30">
                        <div class="form-unit count">30</div>
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label for="#">受益人数</label>
                        <input type="text" placeholder="请输入项目受益人数">
                        <div class="form-unit">人</div>
                    </div>
                    <div class="ui-form-item ui-form-item-textarea">
                        <label for="#">结项概述</label>
                        <textarea class="count-num" placeholder="简述筹款及执行过程中的关键结点、遇到的困难、最终的结果和目前受助人/事的现状，项目执行成功后的感谢反馈与互动。" data-length="500"></textarea>
                        <div class="form-unit count">500</div>
                    </div>

                    <div class="form-imgs" data-index="1" data-max-length="8">
                        <div class="img-box">
                            <b class="close"><img src="../images/icon-fork-white.png" /></b>
                            <input type="file" id="img1">
                            <input type="hidden">
                        </div>
                    </div>
                    <div class="form-imgs-hint ui-border-b">
                        上传项目成果展示图片（4-8张）
                    </div>
                </div>
            </div>
        </form>
    </section>

    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script>
        (function() {
            $('.new-list-cover .new-list .top .btn-close').click(function() {
                $('.new-list-cover').removeClass('show');
            });

            // 绑定对应元素的字数校验事件
            var bind_name = 'input';
            if (navigator.userAgent.indexOf("MSIE") != -1) {
                bind_name = 'propertychange';
            }
            $('.count-num').bind(bind_name, function() {
                checkWords(this, $(this).attr('data-length'));
            })
            $('.count-num').blur(function() {
                if ($(this).val().length > $(this).attr('data-length')) {
                    $(this).val($(this).val().substr(0, $(this).attr('data-length')));
                }
            });
         
            $(".btn-submit-all").tap(function() {
                var dia = $.dialog({
                    title: '温馨提示',
                    content: '天数与清单项提交审核后不可修改',
                    button: ["确认", "取消"]
                });
                dia.on("dialog:action", function(e) {
                    console.log(e.index)
                });
                dia.on("dialog:hide", function(e) {
                    console.log("dialog hide")
                });
            })


            $('.form-imgs').on('click', '.img-box .close', function() {
                var imgs = $(this).parents('.form-imgs');
                var max = parseInt(imgs.attr('data-max-length'));

                $(this).parents('.img-box').remove();

                if (imgs.find('.img-box').length <= max) {
                    imgs.find('.img-box:last-child').show();
                }
            })
            $('.form-imgs').on('change', '.img-box:last-child input[type=file]', function() {
                // 前台本地测试代码模拟返回操作，后台删除
                addPhotoPreview($(this).parents('.form-imgs'), 'file:///D:/git/crowdfundingmoney/crowdfundingmoney/web-app/images_mobile/demo/demo-jieshao-2.jpg');
            })
        })();

        function addPhotoPreview(imgs, url) {
            var max = parseInt(imgs.attr('data-max-length'));

            if (max < imgs.find('.img-box').length) {
                // imgs.find('.img-box').eq(max - 1).css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
            } else {
                imgs.find('.img-box:last-child').css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
                var index = parseInt(imgs.attr('data-index'));
                index++;
                var html = '<div class="img-box"><b class="close"><img src="../images/icon-fork-white.png" alt=""></b><input type="file" id="img' + (index) + '"><input type="hidden"></div>';

                imgs.attr('data-index', index).append(html);

                if (max < imgs.find('.img-box').length) {
                    imgs.find('.img-box:last-child').hide();
                }
            }
        }
        
        function checkWords(obj, n) {
            n = parseInt(n);
            var c = 0;
            if ($(obj).val().length > n) {
                c = 0;
            } else {
                c = n - $(obj).val().length;
            }
            $(obj).siblings('.count').text(c);
        }

        function calFormNum(obj, add) {
            if (typeof add == 'undefined') {
                add = true;
            }
            correctInputNum(obj);
            var c = parseInt($(obj).val());
            c += (add ? 1 : -1);
            if (c < 1) {
                c = 1;
            } else if (c > 99) {
                c = 99;
            }
            $(obj).val(c);
        }

        function correctInputNum(obj) {
            var v = correctNum($(obj).val());
            if (v == '') {
                $(obj).val('1');
            } else {
                $(obj).val(v);
            }
        }

        function correctNum(num) {
            return (num + '').replace(/\D/g, '');
        }
    </script>
</body>
</html>
